/**
 * Author: Lily Jiang
 * Create Time: 2019/12/24
 * Description:
 */

import React from "react";
import { connect } from "react-redux";
import * as actions from "@/store/actions";
import './Index.scss'
import AppHeader from '@/components/appHeader/Index.js'
import { Modal } from 'antd-mobile';
import {Toast, Switch} from "antd-mobile";

const alert = Modal.alert;

class Settings extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bigText: false,
            nightTheme: false
        };
    }

    componentDidMount () {
        this.getDefaultValue()
    }

    getDefaultValue = () => {
        window.localforage.getItem('bigText').then(data => {
            if (data != null) {
                this.setState({
                    bigText: Boolean(parseInt(data))
                })
            }
        }, err => {})

        this.setState({
            nightTheme: this.props.themeType === 'night' ? true : false
        })
    }

    changeLoadingState = (status) => {
        this.props.dispatch(actions.updateAppSetting({
            appLoading: status
        }))
    }

    logout = () => {
        alert('确认退出登录？', '', [
            { text: '取消'},
            {
                text: '确定',
                onPress: () => {
                    this.changeLoadingState(true)
                    React.$api.logout().then(async data => {
                        this.changeLoadingState(false)

                        try {
                            await window.localforage.removeItem('userInfo')
                        } finally {
                            window.location.hash = '#/'
                            window.location.reload()
                        }
                    }, err => {
                        this.changeLoadingState(false)
                        err.msg && Toast.info(err.msg)
                    })
                }
            },
        ])
    }

    changeBigText = () => {
        this.setState({
            bigText: !this.state.bigText,
        }, () => {
            window.localforage.setItem('bigText', +this.state.bigText)
        });

    }

    changeTheme = () => {
        this.setState({
            nightTheme: !this.state.nightTheme,
        }, () => {
            this.props.dispatch(actions.changeTheme(this.state.nightTheme ? 'night' : 'day'))
        });
    }

    render() {
        return (
            <div className="app-container page_setting df-col">
                {<AppHeader title="设置"></AppHeader>}

                <div className="main df1 of-y-a">
                    <div className="group">
                        <div className="cell ubb_1px">
                            <div className="title">
                                <div>大字号</div>
                                <div className="tip">内容页将以更大字号显示</div>
                            </div>
                            <div className="switch">
                                <Switch color="#03a9f5"
                                    checked={this.state.bigText}
                                    onChange={this.changeBigText}/>
                            </div>
                        </div>
                        <div className="cell">
                            <div className="title">夜间模式</div>
                            <div className="switch">
                                <Switch color="#03a9f5"
                                        checked={this.state.nightTheme}
                                        onChange={this.changeTheme}/>
                            </div>
                        </div>
                    </div>
                    <div className="group">
                        <div className="cell">
                            <div className="title">清除缓存</div>
                            <i className="right-arrow c999"></i>
                        </div>
                    </div>
                    <div className="group">
                        <div className="cell ubb_1px">
                            <div className="title">去好评</div>
                            <i className="right-arrow c999"></i>
                        </div>
                        <div className="cell">
                            <div className="title">去吐槽</div>
                            <i className="right-arrow c999"></i>
                        </div>
                    </div>
                    <div className="group">
                        <div className="cell ubb_1px">
                            <div className="title">证照中心</div>
                            <i className="right-arrow c999"></i>
                        </div>
                        <div className="cell">
                            <div className="title">知乎协议</div>
                            <i className="right-arrow c999"></i>
                        </div>
                    </div>
                    {
                        this.props.isLogin ? (
                            <div className="group">
                                <div className="cell">
                                    <div className="title logout-btn" onClick={this.logout}>退出登录</div>
                                </div>
                            </div>
                        ) : ''
                    }


                    <div className="footer">当前版本：1.1.1</div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        isLogin: state.app.isLogin,
        themeType: state.app.themeType
    }
}

export default connect(mapStateToProps)(Settings)